<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>欢迎</title>
  <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
  <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css">
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.min.js"></script>

  <![endif]-->
</head>
<body style="height: 100%">
<!-- 正文开始 -->
<!--<div class="welcome-page">
  <img class="welcome-page-img" src="${ctxPath}/assets/images/ic_welcome.png">
</div>-->
<div class="layui-col-md10">
  <fieldset class="layui-elem-field layui-field-title">
    <legend>商品出售+泳池预约收入对比</legend>
  </fieldset>
  <div id="main" style="height:600px;padding-top:5%"></div>
  <fieldset class="layui-elem-field layui-field-title">
    <legend>商品出售收入图表</legend>
  </fieldset>
  <div id="first" style="height:600px;padding-top:5%"></div>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>泳池预约收入图表</legend>
    </fieldset>
    <div id="third" style="height:600px;padding-top:5%"></div>
  <fieldset class="layui-elem-field layui-field-title">
    <legend>统计近7天的商品销售收入图表</legend>
  </fieldset>
  <div id="second" style="height:600px;padding-top:5%"></div>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>统计近7天的教练预约收入图表</legend>
    </fieldset>
    <div id="four" style="height:600px;padding-top:5%"></div>
</div>

<style>
  .welcome-page {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .welcome-page .welcome-page-img {
    display: inline-block;
    height: 260px;
    margin: 10px 15px;
  }
</style>

<!-- js部分 -->
<script src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script src="${ctxPath}/assets/js/common.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.min.js"></script>

<script>

  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;

  setTimeout(function () {
    option = {
      legend: {},
      tooltip: {
        trigger: 'axis',
        showContent: false
      },
      // color:['#ee6666','#5470c6'],
      dataset: {
        source: [
          ['product', '0329', '0330', '0331', '0401', '0402', '0403', '0404'],
          ['物品出售', 156, 182, 188, 170, 153, 185, 167],
          ['泳池出租', 151, 151, 155, 153, 173, 168, 160]
        ]
      },
      xAxis: { type: 'category' },
      yAxis: { gridIndex: 0 },
      grid: { top: '55%' },
      series: [
        {
          type: 'line',
          smooth: true,
          seriesLayoutBy: 'row',
          emphasis: { focus: 'series' }
        },
        {
          type: 'line',
          smooth: true,
          seriesLayoutBy: 'row',
          emphasis: { focus: 'series' }
        },
        {
          type: 'pie',
          id: 'pie',
          radius: '30%',
          center: ['50%', '25%'],
          emphasis: {
            focus: 'self'
          },
          label: {
            formatter: '{b}: {@0313} ({d}%)'
          },
          encode: {
            itemName: 'product',
            value: '0313',
            tooltip: '0313'
          }
        }
      ]
    };
    myChart.on('updateAxisPointer', function (event) {
      const xAxisInfo = event.axesInfo[0];
      if (xAxisInfo) {
        const dimension = xAxisInfo.value + 1;
        myChart.setOption({
          series: {
            id: 'pie',
            label: {
              formatter: '{b}: {@[' + dimension + ']} ({d}%)'
            },
            encode: {
              value: dimension,
              tooltip: dimension
            }
          }
        });
      }
    });
    myChart.setOption(option);
  });




</script>
<script>
  var chartDom1 = document.getElementById('first');
  var myChart1 = echarts.init(chartDom1);
  var option1;

  option1 = {
    xAxis: {
      type: 'category',
      data: [ '0329', '0330', '0331', '0401', '0402', '0403', '0404']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [
          {
            value: 120,
            itemStyle: {
        //      color: '#FF0000'
            }
          },
          {
            value: 200,
            itemStyle: {
          //    color: '#FF7F00'
            }
          },
          {
            value: 150,
            itemStyle: {
          //    color: '#FFFF00'
            }
          },
          {
            value: 80,
            itemStyle: {
         //     color: '#00FF00'
            }
          },
          {
            value: 70,
            itemStyle: {
         //     color: '#00FFFF'
            }
          },
          {
            value: 110,
            itemStyle: {
         //     color: '#0000FF'
            }
          },
          {
            value: 130,
            itemStyle: {
         //     color: '#8B00FF'
            }
          }
        ],
        type: 'bar'
      }
    ]
  };

  option1 && myChart1.setOption(option1);
</script>
<script>

    var chartDom2 = document.getElementById('second');
    var myChart2 = echarts.init(chartDom2);
    var option2;

    setTimeout(function () {
        option2 = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: [
                    ['product', '0329', '0330', '0331', '0401', '0402', '0403', '0404'],
                    ['脉动', 16, 42, 48, 30, 12, 45, 10],
                    ['东鹏特饮', 11, 11, 15, 13, 32, 28, 20],
                    ['定制充气游泳圈', 0, 22, 28, 4, 14, 6 , 24],
                    ['游泳镜', 25, 37, 41, 18, 33, 49, 30],
                    ['旺仔小小酥', 23, 16, 14, 20, 4, 19 , 18],
                    ['鼻夹耳塞', 12, 26, 28, 18, 32, 40, 6],
                    ['游泳帽', 6, 33, 41, 28, 30, 21 , 19],
                ]
            },
            xAxis: { type: 'category' },
            yAxis: { gridIndex: 0 },
            grid: { top: '55%' },
            series: [
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    emphasis: {
                        focus: 'self'
                    },
                    label: {
                        formatter: '{b}: {@0329} ({d}%)'
                    },
                    encode: {
                        itemName: 'product',
                        value: '0329',
                        tooltip: '0329'
                    }
                }
            ]
        };
        myChart2.on('updateAxisPointer', function (event) {
            const xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                const dimension = xAxisInfo.value + 1;
                myChart2.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });
        myChart2.setOption(option2);
    });
</script>
<script>
    var chartDom3 = document.getElementById('third');
    var myChart3 = echarts.init(chartDom3);
    var option3;

    option3 = {
        xAxis: {
            type: 'category',
            data: [ '0329', '0330', '0331', '0401', '0402', '0403', '0404']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [
                    {
                        value: 150,
                        itemStyle: {
                            color: '#00FF00'

                        }
                    },
                    {
                        value: 400,
                        itemStyle: {
                            color: '#00FF00'

                        }
                    },
                    {
                        value: 300,
                        itemStyle: {
                            color: '#00FF00'
                        }
                    },
                    {
                        value: 200,
                        itemStyle: {
                                 color: '#00FF00'
                        }
                    },
                    {
                        value: 400,
                        itemStyle: {
                            color: '#00FF00'

                        }
                    },
                    {
                        value: 250,
                        itemStyle: {
                            color: '#00FF00'

                        }
                    },
                    {
                        value: 250,
                        itemStyle: {
                            color: '#00FF00'

                        }
                    }
                ],
                type: 'bar'
            }
        ]
    };

    option3 && myChart3.setOption(option3);
</script>
<script>

    var chartDom4 = document.getElementById('four');
    var myChart4 = echarts.init(chartDom4);
    var option4;

    setTimeout(function () {
        option4 = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: [
                    ['product', '0329', '0330', '0331', '0401', '0402', '0403', '0404'],
                    ['杨攀飞', 150, 0, 0, 150, 300, 0, 0],
                    ['赵凯', 0, 200, 0, 200, 0, 0, 0],
                    ['李强', 0, 250, 250, 0, 0, 0 , 250],
                    ['李峰', 250, 250, 500, 0, 0, 0, 0],
                    ['张志刚', 200, 0, 0, 200, 400, 0 , 200]
                ]
            },
            xAxis: { type: 'category' },
            yAxis: { gridIndex: 0 },
            grid: { top: '55%' },
            series: [
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    emphasis: {
                        focus: 'self'
                    },
                    label: {
                        formatter: '{b}: {@0329} ({d}%)'
                    },
                    encode: {
                        itemName: 'product',
                        value: '0329',
                        tooltip: '0329'
                    }
                }
            ]
        };
        myChart4.on('updateAxisPointer', function (event) {
            const xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                const dimension = xAxisInfo.value + 1;
                myChart4.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });
        myChart4.setOption(option4);
    });
</script>

</body>
</html>